<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .menu {
                width: 300px;
            }
            .menu-item {
                width: 100%;
                overflow: hidden;
            }
            .menu-item:hover{
                cursor: pointer;
            }
            .title {
                width: 100%;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .bg-pink {
                background-color: pink;
            }
            .bg-aqua {
                background-color: aqua;
            }
            .sub-menu {
                height: 0px;
            }
        </style>
    </head>
    <body>
        <div id="menu" class="menu"></div>
        <script>
            /*
                从后端来的。基于数据来渲染页面
                如果有children 就说明有子菜单

                1. 动态渲染
                2. heigh 改变增加过度效果
            */
            const data = [
                {
                    name: "首页",
                },
                {
                    name: "博客",
                    children: [
                        { name: "菜单一" },
                        { name: "菜单二" },
                        { name: "菜单三" },
                    ],
                },
                {
                    name: "技术支持",
                    children: [
                        { name: "菜单一" },
                        { name: "菜单二" },
                        { name: "菜单三" },
                        { name: "菜单四" },
                    ],
                },
                {
                    name: "操作",
                    children: [{ name: "菜单一" }, { name: "菜单二" }],
                },
                { name: "帮组" },
                { name: "新闻" },
            ];
            let menu = document.getElementById("menu");
            for (let i = 0; i < data.length; i++) {
                let menuItem = document.createElement("div");
                let title = document.createElement("div");
                let titleText = document.createTextNode(data[i].name);

                menu.appendChild(menuItem);
                menuItem.appendChild(title);
                title.appendChild(titleText);
                menuItem.className = "menu-item";
                title.className = "title bg-pink";
                let subMenu = document.createElement("div");
                for (
                    let j = 0;
                    data[i].children !== undefined &&
                    j < data[i].children.length;
                    j++
                ) {
                    let bgPink = document.createElement("div");
                    let bgPinkText2 = document.createTextNode(
                        data[i].children[j].name
                    );
                    menuItem.appendChild(subMenu)
                    subMenu.appendChild(bgPink);
                    bgPink.appendChild(bgPinkText2);
                    title.setAttribute("onclick", "openMenu(this)");
                    subMenu.className = "sub-menu";
                    subMenu.style.transition = "all 0.5s ease";
                    bgPink.className = "title bg-aqua";
                }
            }
            function getStyleValue(dom, attr) {
                return parseFloat(getComputedStyle(dom)[attr]);
            }
            function openMenu(dom) {
                let menuItem = dom.parentNode;
                let subMenu = menuItem.querySelector(".sub-menu");
                let height = getStyleValue(subMenu, "height");
                if (height === 0) {
                    let subMenuChildren = menuItem.querySelectorAll(".bg-aqua");
                    let num = subMenuChildren.length;
                    let subMenuHeight = num * 45 + "px";
                    subMenu.style.height = subMenuHeight;
                } else {
                    subMenu.style.height = "0px";
                }
            }
        </script>
    </body>
</html>
